import React, {Component} from 'react';
import {Text,View} from 'react-native';
import TabNavigator from 'react-native-tab-navigator'

// 第三方图标
import Svg from 'react-native-svg-uri';
import SvgData from '../../utils/iconSvg.js';

import {pxToDp} from "../../utils/styleKits";
import Friend from './friend';
import Group from './group';
import Message from './message';
import My from './my';
import JMessage from '../../utils/JMessage.js'
import {inject, observer} from 'mobx-react';

const dataSource = [
  {
    icon: SvgData.friend,
    selectedIcon: SvgData.selectedFriend,
    tabPage: 'Friend',
    tabName: '交友',
    badge: 0,
    component: <Friend/>
  },
  {
    icon: SvgData.group,
    selectedIcon: SvgData.selectedGroup,
    tabPage: 'Group',
    tabName: '圈子',
    badge: 0,
    component: <Group/>
  },
  {
    icon: SvgData.message,
    selectedIcon: SvgData.selectedMessage,
    tabPage: 'Message',
    tabName: '消息',
    badge: 5,
    component: <Message/>
  },
  {
    icon: SvgData.my,
    selectedIcon: SvgData.selectedMy,
    tabPage: 'My',
    tabName: '我的',
    badge: 0,
    component: <My/>
  }
];

@inject('RootStore')
@observer
class TabBar extends Component {
  constructor(props){
    super(props);
    // 接收其他页面跳转到tabBar页面时, 传递的指定底部值
    let params = this.props.route.params;
    this.state = {
      selectedTab: params ? params.pagename : 'My',
    };
  }

  async componentDidMount(): void {
    // 登录极光通讯
    const username = this.props.RootStore.userId;
    await JMessage.login({username, password:username});
  }

  render() {
    return (
      <TabNavigator tabBarStyle={{backgroundColor:'#ddd'}}>
        {this.renderItem()}
      </TabNavigator>
    );
  }

  // 渲染底部每一个item
  renderItem = () => {
    return dataSource.map(((item,i) => {
      return <TabNavigator.Item
        key={i}
        selected={this.state.selectedTab === item.tabPage}
        title={item.tabName}
        renderIcon={() => <Svg svgXmlData={item.icon} width={pxToDp(20)} height={pxToDp(20)}/>}
        renderSelectedIcon={() => <Svg svgXmlData={item.icon} fill='#c863b5' width={pxToDp(20)} height={pxToDp(20)}/>}
        onPress={() => this.setState({selectedTab: item.tabPage})}
        selectedTitleStyle={{color: '#c863b5'}}
      >
        {item.component}
      </TabNavigator.Item>
    }));
  }
}

export default TabBar;